<template>
  <view>
    <view class="nav">
      <view class="nav-title">生活家</view>
    </view>
    <view class="wrapper">
      <view class="hot">
        <view class="hot_title">
          <view class="box"></view>热门标签&nbsp;{{datas.hot_tab.title}}
        </view>
        <view class="hot_img">
          <image :src="datas.hot_tab.img1" class="img_size"></image>
          <image :src="datas.hot_tab.img2" class="img_size"></image>
          <image :src="datas.hot_tab.img3" class="img_size clean"></image>
        </view>
      </view>
      <view class="meitu">
        <view class="meitu_title">
          <view class="box"></view>{{datas.meitu.title}}
        </view>
        <view class="meitu_box">
          <image :src="datas.meitu.img1" mode="" class="meitu_img"></image>
          <image :src="datas.meitu.img2" mode="" class="meitu_img"></image>
          <image :src="datas.meitu.img3" mode="" class="meitu_img"></image>
          <image :src="datas.meitu.img4" mode="" class="meitu_img"></image>
          <image :src="datas.meitu.img5" mode="" class="meitu_img"></image>
          <image :src="datas.meitu.img6" mode="" class="meitu_img"></image>
        </view>
        <view class="msg">
          <view class="box"></view>{{datas.meitu.address}}
          <uni-icons type="location-filled" size="30"></uni-icons>
        </view>
        <view class="msg">
          <view class="box"></view>{{datas.meitu.intro}}
        </view>
      </view>
      <view class="user" v-for="(item,i) in datas.user" :key="i">
        <view class="user_head">
          <image :src="item.head_img" class="head_img"></image>
          <view class="user_name">{{item.name}}</view>
          <view class="follow">关注</view>
        </view>
        <image :src="item.img" class="user_img"></image>
        <view class="intro">{{item.intro}}</view>
        <view class="user_icon">
          <image :src="datas.icon.share" class="share_icon"></image>
          <image :src="datas.icon.msg" class="msg_icon"></image>
          <image :src="datas.icon.shoucang" class="sc_icon"></image>
          <image :src="datas.icon.praise" class="pra_icon"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        datas: {}
      };
    },
    methods: {
      async getData() {
        const {
          data
        } = await uni.$http.get('/liveHouse')
        this.datas = data.data;
        // console.log(this.datas)
      }
    },
    onLoad: function() {
      this.getData()
    }
  }
</script>

<style lang="scss">
  .title {
    color: #232e3d;
    font-size: 30rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
  }

  .clean {
    margin: 0;
  }

  .nav {
    width: 100%;
    height: 124rpx;
    border-bottom: 1px solid #ececec;

    .nav-title {
      margin: 66rpx 0 42rpx 318rpx;
      font-size: 52rpx;
      font-family: "黑体";
    }
  }

  .wrapper {

    .box {
      display: block;
      width: 14rpx;
      height: 7rpx;
      margin-right: 12rpx;
      background-color: #232e3d;
    }

    .hot {
      width: 100%;

      .hot_title {
        margin: 16rpx 0 30rpx;
        padding: 0 24rpx;
        @extend .title
      }

      .hot_img {
        padding: 0 14rpx 0 24rpx;
        display: flex;
        justify-content: space-between;

        .img_size {
          width: 258rpx;
          height: 170rpx;
          margin-right: 14rpx;
        }
      }
    }

    // hot
    .meitu {
      width: 100%;
      padding: 0 24rpx;

      .meitu_title {
        margin: 30rpx 0 30rpx;
        @extend .title
      }

      .meitu_img {
        width: 228rpx;
        height: 230rpx;
        margin: 0 6rpx 30rpx 0;
      }

      .msg {
        margin: 30rpx 0 28rpx;
        @extend .title
      }
    }

    // meitu
    .user {

      .user_head {
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .head_img {
          width: 72rpx;
          height: 72rpx;
        }

        .user_name {
          margin: 0 450rpx 0 18rpx;
          white-space: nowrap;
          @extend .title
        }

        .follow {
          width: 100rpx;
          height: 58rpx;
          border-radius: 30px;
          text-align: center;
          line-height: 58rpx;
          font-size: 30rpx;
          background-color: #243140;
          color: #DFDEDC;
        }
      }

      .user_img {
        width: 100%;
        margin: 30rpx 0;
      }

      .intro {
        padding: 0 24rpx;
        @extend .title
      }

      .user_icon {
        margin: 30rpx 0;
        padding: 0 24rpx 30rpx;
        border-bottom: 1px solid #ececec;
        display: flex;
        justify-content: space-between;

        .share_icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 248rpx;
          cursor: pointer;
        }

        .msg_icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 126rpx;
          cursor: pointer;
        }

        .sc_icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 126rpx;
          cursor: pointer;
        }

        .pra_icon {
          width: 30rpx;
          height: 30rpx;
          cursor: pointer;
        }
      }
    }
  }
</style>
